<script lang="ts" setup>
import { message } from 'ant-design-vue';
import tags_details from './components/tags_details.vue';
import img_file from './components/img_file.vue';
import img_details from './components/img_details.vue';
import { useImgEventStore } from '@/store/modules/dcp/image_management/imgEvent';

const isImgDetails = ref<boolean>(false);
function getImgDetails() {
  isImgDetails.value = !isImgDetails.value;
}
const childData = ref('');
function handleSendData(data: string) {
  isImgDetails.value = !isImgDetails.value;
  childData.value = data;
}
// 新增文件夹
const visible = ref<boolean>(false);
const event = ref<string>('');
const childRef = ref<InstanceType<typeof img_file> | null>(null);
function showModal() {
  visible.value = !visible.value;
}
async function handleOk() {
  if (event.value === '') {
    message.error('请输入文件夹名称！');
  }
  else {
    // 新增文件夹
    await useImgEventStore().addEventItem(event.value);
    if (childRef.value) {
      (childRef.value as any).getData();
    }
    visible.value = !visible.value;
  }
}
</script>

<template>
  <PubPageMain class="max">
    <div class="content">
      <tags_details />
      <a-divider />
      <div class="header">
        <div class="left">
          <a-space>
            <div class="pjTitle">
              数据管理
            </div>
            <a-button v-if="!isImgDetails" type="link" @click="showModal">
              新增
            </a-button>
          </a-space>
        </div>
      </div>
      <img_file v-if="!isImgDetails" ref="childRef" @send-data="handleSendData" />
      <img_details v-if="isImgDetails" :get-img-details="getImgDetails" :event="childData" />
      <a-modal v-model:visible="visible" title="新增文件夹" @ok="handleOk">
        <a-form-item label="文件夹名称" name="event">
          <a-input v-model:value="event" placeholder="请输入文件夹名称" />
        </a-form-item>
      </a-modal>
    </div>
  </PubPageMain>
</template>

<style lang="scss" scoped>
.max {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  max-height: 95%;
  overflow: auto;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 3vw;
    margin-bottom: 0.5vw;

    .pjTitle {
      padding-left: 1vw;
      background: url("@/assets/images/title-left-bg.svg") no-repeat;
    }

    .right {
      display: flex;
      align-items: center;
    }
  }
}

.content {
  box-sizing: border-box;
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  height: 95%;
  overflow: auto;
  overflow-y: auto;
}
</style>
